<template>
  <div>
    <!-- 搜索框 -->
    <div class="search">
      <el-input
        size="mini"
        style="width: 200px; margin-right :10px; font-size:13px; "
        v-model="params.name"
        placeholder="请输入公告内容查询"
      ></el-input>
      <el-input
        size="mini"
        style="width: 200px; margin-right :10px; font-size:13px; "
        v-model="params.creator"
        placeholder="请输入创建人查询"
      ></el-input>
      <el-button size="mini" type="info" @click="findBySearch()" plain>查询</el-button>
      <el-button size="mini" type="warning" @click="reset()" plain>重置</el-button>
    </div>

    <!-- 添加-删除 -->
    <div class="search" style="margin-top: 10px;">
      <el-button size="mini" type="primary" @click="add()" plain>新增</el-button>
      <el-button size="mini" type="danger" @click="BatchDelete()" plain>批量删除</el-button>
    </div>

    <!-- 表格 -->
    <div class="search" style="margin-top: 10px; font-size:12px;">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="id" label="序号" width="70"></el-table-column>
        <el-table-column prop="content" label="公告内容" show-overflow-tooltip></el-table-column>
        <el-table-column prop="creatTime" label="创建时间" show-overflow-tooltip></el-table-column>
        <el-table-column prop="creator" label="创建人" show-overflow-tooltip></el-table-column>
        <el-table-column width="150px" label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!--  新增表单  -->
    <el-dialog title="新增" :visible.sync="dialogFormVisible">
      <el-form
        :model="form"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
<!--        <el-form-item label="标题" prop="title">-->
<!--          <el-input v-model="form.title" autocomplete="off"></el-input>-->
<!--        </el-form-item>-->
        <el-form-item label="内容" prop="content">
          <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="form.content">
          </el-input>
        </el-form-item>
        <el-form-item label="创建时间" prop="creatTime">
          <el-date-picker
            style="width: 100%;"
            v-model="form.creatTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addAdmin">确 定</el-button>
      </div>
    </el-dialog>

    <!--  编辑表单  -->
    <el-dialog title="新增" :visible.sync="dialogFormVisibleUpdate">
      <el-form
        :model="updateForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
<!--        <el-form-item label="标题" prop="title">-->
<!--          <el-input v-model="updateForm.title" autocomplete="off"></el-input>-->
<!--        </el-form-item>-->
        <el-form-item label="内容" prop="content">
          <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="updateForm.content">
          </el-input>
        </el-form-item>
        <el-form-item label="创建时间" prop="creatTime">
          <el-date-picker
            style="width: 100%;"
            v-model="updateForm.creatTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleUpdate = false">取 消</el-button>
        <el-button type="primary" @click="updateAdmin">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 分页 -->
    <div style="margin-top:10px; float: right">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="params.pageNum"
        :page-sizes="[15, 20]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "DoctorView",
  data() {
    return {
      form: {}, //新增表单
      dialogFormVisible: false, //新增表单，默认不显示
      formLabelWidth: "100px", //表单内每行的宽度
      updateForm: {}, //编辑表单
      dialogFormVisibleUpdate: false, //编辑表单，默认不显示
      ruleForm: {},
      //表单校验
      params: {
        name: "",
        creator: "",
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      tableData: [],
      multipleSelection: [], //批量删除
      departments: [], //科室
      value: "" //科室的选择框
    };
  },
  //生命周期钩子
  created() {
    //查询全部
    this.findBySearch();
  },
  mounted() {
    this.findDepartments();
  },
  methods: {
    // 条件查询
    findBySearch() {
      request
        .get("/Announcement/findBySearch", { params: this.params })
        .then(res => {
          if (res.data && res.data.list) {
            this.tableData = res.data.list;
            this.total = res.data.total;
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch(error => {
          console.error("Error occurred while fetching data:", error);
        });
    },

    //查询科室
    findDepartments() {
      request
        .get("/Administrative/getAll")
        .then(res => {
          if (res.data) {
            console.log(res);
            this.departments = res.data;
            console.log(this.departments);
            // 为每个科室对象添加一个名称属性
            this.departments.forEach(department => {
              department.name = department.departmentName;
            });
            console.log(this.departments);
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch(error => {
          console.error("Error occurred while fetching data:", error);
        });
    },

    //重置
    reset() {
      this.params.name = "";
      this.params.creator = "";
      this.findBySearch();
    },

    //新增按钮
    add() {
      //弹出新增表单
      this.dialogFormVisible = true;
    },

    //新增表单文件上传
    successUpload(res) {
      this.updateForm.headPhoto = res.data;
    },

    //发起新增请求
    addAdmin() {
      console.log(this.form);
      request.post("/Announcement/add", this.form).then(res => {
        console.log(res);
        if (res.code == 200) {
          this.$message({
            message: "添加成功!",
            type: "success"
          });
          this.dialogFormVisible = false;
          this.findBySearch();
          //将表单内容清空
          this.form = {};
        } else {
          this.$message({
            message: res.msg,
            type: "error"
          });
        }
      });
    },

    //编辑按钮
    handleEdit(index, row) {
      this.dialogFormVisibleUpdate = true;
      request
        .get("/Announcement/findById", { params: { id: row.id } })
        .then(res => {
          this.updateForm = res.data;
          console.log(this.updateForm);
        });
      console.log(index, row);
    },

    //编辑表单请求
    updateAdmin() {
      console.log(this.updateForm);
      console.log(this.departments);
      request.post("/Announcement/update", this.updateForm).then(res => {
        if (res.code == 200) {
          this.$message({
            message: "修改成功!",
            type: "success"
          });
          this.dialogFormVisibleUpdate = false;
          this.findBySearch();
        } else {
          this.$message({
            message: res.msg,
            type: "error"
          });
        }
      });
    },

    //删除
    handleDelete(index, row) {
      //提示是否删除
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          request
            .get("/Announcement/delete", { params: { id: row.id } })
            .then(res => {
              if (res.code == 200) {
                this.$message({
                  message: "删除成功!",
                  type: "success"
                });
                this.findBySearch();
              } else {
                this.$message({
                  message: res.msg,
                  type: "error"
                });
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },

    //存放选中的数据，要批量删除的数据
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection);
    },

    //批量删除请求
    BatchDelete() {
      console.log(this.multipleSelection);
      //提示是否删除
      this.$confirm("确定批量删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          if (this.multipleSelection.length == 0) {
            this.$message.warning("请选择要删除的数据!");
            return;
          }
          request
            .post("/Announcement/batchDelete", this.multipleSelection)
            .then(res => {
              if (res.code == 200) {
                this.$message({
                  message: "批量删除成功!",
                  type: "success"
                });
                this.findBySearch();
              } else {
                this.$message({
                  message: res.msg,
                  type: "error"
                });
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消批量删除"
          });
        });
    },

    //分页
    handleSizeChange(pageSize) {
      this.params.pageSize = pageSize;
      this.findBySearch();
    },

    handleCurrentChange(pageNum) {
      this.params.pageNum = pageNum;
      this.findBySearch();
    }
  }
};
</script>
<style scoped>
.search {
  width: 100%;
  box-shadow: 1px 0 6px rgba(0, 21, 41, 0.25);
  border-radius: 5px;
  padding: 15px 0 15px 10px;
}
</style>
